<template>
	<kui-page :custom-header="false">
		<template v-slot:body>
			<view class="kui-mt-3">
				<kui-cell-group title="基本用法">
					<kui-cell title="打开弹出层" @click="openPopup('center')"></kui-cell>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="弹出位置">
					<kui-cell title="顶部弹出" @click="openPopup('top')"></kui-cell>
					<kui-cell title="底部弹出" @click="openPopup('bottom')"></kui-cell>
					<kui-cell title="左侧弹出" @click="openPopup('left')"></kui-cell>
					<kui-cell title="右侧弹出" @click="openPopup('right')"></kui-cell>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="圆角弹窗">
					<kui-cell title="顶部弹出" @click="openPopup('top', 'lg')"></kui-cell>
					<kui-cell title="底部弹出" @click="openPopup('bottom', 'lg')"></kui-cell>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="图标用法">
					<kui-cell title="关闭图标" @click="openPopupIcon('bottom')"></kui-cell>
					<kui-cell title="图标位置" @click="openPopupIconPosition('bottom')"></kui-cell>
					<kui-cell title="自定义图标" @click="openPopupIconType('bottom')"></kui-cell>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="自定义关闭事件">
					<kui-cell title="手动关闭" @click="openPopupClose"></kui-cell>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="回调事件">
					<kui-cell title="打开弹出层" @click="openPopupEvent('center')"></kui-cell>
				</kui-cell-group>
			</view>
		</template>
	</kui-page>
	<kui-popup ref="popupTop" :id="id" height="200rpx" position="top">
		<kui-container :marginY="0" height="auto" background-color="white">
			<view class="kui-mx-3 kui-my-10 kui-flex kui-justify-center">
				<kui-button type="primary">点击关闭</kui-button>
			</view>
		</kui-container>
	</kui-popup>
	<kui-popup ref="popupLeft" :radius-size="radiusSize" width="200px" position="left">
		<kui-container :marginY="0" height="100%" background-color="transparent">
			<view class="kui-mx-3 kui-my-10 kui-flex kui-justify-center">
				<kui-button type="primary">点击关闭</kui-button>
			</view>
		</kui-container>
	</kui-popup>
	<kui-popup ref="popupRight" :radius-size="radiusSize" width="200px" position="right">
		<kui-container :marginY="0" height="auto" background-color="transparent">
			<view class="kui-mx-3 kui-my-10 kui-flex kui-justify-center">
				<kui-button type="primary">点击关闭</kui-button>
			</view>
		</kui-container>
	</kui-popup>
	<kui-popup ref="popup" radius-size="sm">
		<kui-container width="300px" background-color="#FFFFFF">
			<view class="kui-h-full kui-box-border kui-flex kui-justify-center kui-items-center kui-leading-5 kui-py-0">
				<kui-text size="18px" decode>金尊清酒斗十千，<br />玉盘珍羞直万钱。<br />停杯投箸不能食，<br />拔剑四顾心茫然。</kui-text>
			</view>
		</kui-container>
	</kui-popup>
	<kui-popup ref="popupBottom" height="200rpx" position="bottom">
		<kui-container :marginY="0" height="100%" background-color="transparent">
			<view class="kui-mx-3 kui-my-10 kui-flex kui-justify-center">
				<kui-button type="primary">点击关闭</kui-button>
			</view>
		</kui-container>
	</kui-popup>
	<kui-popup ref="popupEvent" radius-size="sm" @open="onOpen" @close="onClose">
		<kui-container width="300px" background-color="#FFFFFF">
			<view
				class="kui-h-full kui-box-border kui-flex kui-justify-center kui-items-center kui-leading-5 kui-py-0">
				<kui-text size="18px" decode>金尊清酒斗十千，<br />玉盘珍羞直万钱。<br />停杯投箸不能食，<br />拔剑四顾心茫然。</kui-text>
			</view>
		</kui-container>
	</kui-popup>
	<kui-popup ref="popupIcon" show-icon height="200px" position="bottom">
		<kui-container :marginY="0" height="auto" background-color="transparent">
			<view>
				<kui-text>测试内容icon</kui-text>
			</view>
		</kui-container>
	</kui-popup>
	<kui-popup ref="popupIconPosition" show-icon close-icon-position="left" height="200px" position="bottom">
		<kui-container :marginY="0" height="auto" background-color="transparent">
			<view class="kui-mt-3">
				<kui-text>测试内容icon_position</kui-text>
			</view>
		</kui-container>
	</kui-popup>
	<kui-popup ref="popupIconType" show-icon close-icon-type="clear" height="200px" position="bottom">
		<kui-container :marginY="0" height="auto" background-color="transparent">
			<view class="kui-mt-3">
				<kui-text>测试内容icon_type</kui-text>
			</view>
		</kui-container>
	</kui-popup>
	<kui-popup ref="popupClose" :close-on-click-mask="false" show-icon height="200px" position="bottom" @click-close-icon="onClickCloseIcon">
		<kui-container :marginY="0" height="auto" background-color="transparent">
			<view class="kui-mt-3">
				<kui-text>测试内容close</kui-text>
			</view>
		</kui-container>
	</kui-popup>
</template>

<script lang="ts">
	import {
		reactive,
		SetupContext,
		getCurrentInstance,
		toRefs,
		nextTick
	} from 'vue';

	export default {
		setup(props, context: SetupContext) {
			const {
				proxy
			} = getCurrentInstance();

			const data = reactive({
				position: '',
				radiusSize: '',
				top: false,
				bottom: false,
				left: false,
				right: false,
				id: 0
			});

			const openPopup = (p: string = '', r: string = '') => {
				nextTick(() => {
					data.position = p ? p : '';
					data.radiusSize = r ? r : 'none';
					if (p === 'top') {
						console.log(p);
						proxy.$refs['popupTop'].changeRadiusSize(data.radiusSize);
						proxy.$refs['popupTop'].open();
					} else if (p === 'bottom') {
						proxy.$refs['popupBottom'].changeRadiusSize(data.radiusSize);
						proxy.$refs['popupBottom'].open();
					} else if (p === 'left') {
						proxy.$refs['popupLeft'].changeRadiusSize(data.radiusSize);
						proxy.$refs['popupLeft'].open();
					} else if (p === 'right') {
						proxy.$refs['popupRight'].changeRadiusSize(data.radiusSize);
						proxy.$refs['popupRight'].open();
					} else {
						proxy.$refs['popup'].open();
					}
				});
			};
			
			const openPopupEvent = () => {
				nextTick(() => {
					proxy.$refs['popupEvent'].open();
				});
			}
			
			const openPopupIcon = () => {
				nextTick(() => {
					proxy.$refs['popupIcon'].open();
				})
			}
			
			const openPopupIconPosition = () => {
				nextTick(() => {
					proxy.$refs['popupIconPosition'].open();
				})
			}
			
			const openPopupIconType = () => {
				nextTick(() => {
					proxy.$refs['popupIconType'].open();
				})
			}
			
			const onClickCloseIcon = () => {
				nextTick(() => {
					proxy.$refs['popupClose'].forceClose();
				})
			}
			
			let openPopupClose = () => {
				nextTick(() => {
					proxy.$refs['popupClose'].open();
				})
			}
			
			const onOpen = () => {
				uni.showToast({
					title: '已打开'
				});
			}
			
			const onClose = () => {
				uni.showToast({
					title: '已关闭'
				});
			}

			return {
				openPopup,
				openPopupEvent,
				openPopupIcon,
				openPopupIconPosition,
				openPopupIconType,
				onClickCloseIcon,
				openPopupClose,
				onOpen,
				onClose,
				...toRefs(data)
			}
		}
	}
</script>

<style>

</style>
